<template>
	<view class="container">
		<bnn-loading :loading="state === 0"/>
		<view v-if="state !== 0" class="list" :class="state === 1 ? 'h100' : ''">
			<view class="list-header f-bc">
				<view class="row name">策略</view>
				<view class="row flex1">周收益</view>
				<view class="row flex1">月收益</view>
				<view class="row status">状态</view>
				<view class="row operate">{{state === 1 ? '操作' : '选中'}}</view>
			</view>
			<scroll-view class="list-content" scroll-y @scrolltolower="loadMore">
				<view class="list-item f-bc" v-for="(item, index) in list" @click="viewStrategy(item)" v-if="(state === 1 && item.rules == '1') || state === 2">
					<view class="row name t-o-e">{{item.name}}<span class="item-tag" :class="item.tag ? 'backgreen' : 'backred'">{{item.tag ? '跟' : '订'}}</span></view>
					<view class="row flex1" :class="item.week >= 0 ? 'cred' : 'cgreen'">{{item.week}}%</view>
					<view class="row flex1" :class="item.month >= 0 ? 'cred' : 'cgreen'">{{item.month}}%</view>
					<view class="row status" @click.stop="bubbling()">
						<u-switch
							v-if="state === 1"
							v-model="item.status"
							size="28"
							:loading="item.loading"
							:active-value="index + ',' + item.id + ',' + 1"
							:inactive-value="index + ',' + item.id + ',' + 0"
							@change="changeStatus"
						></u-switch>
						<span v-if="state === 2">{{item.status ? '已启动' : '待启动'}}</span>
					</view>
					<view class="row operate" v-if="state === 1" @click.stop="viewRule(item)">
						<span class="cblue">查看规则</span>
					</view>
					<view class="row operate" v-if="state === 2" @click.stop="bubbling()">
						<u-checkbox class="list-checkbox" v-model="item.checked" size="32" active-color="#1296DB"></u-checkbox>
					</view>
				</view>
				<view class="list-empty">
					<u-loadmore v-if="(list.length > 0 && state === 2) || (list.filter(item => item.rules == '1').length > 0 && state === 1)" :status="loading" />
				</view>
				<data-empty v-if="(list.length == 0 && state === 2) || (list.filter(item => item.rules == '1').length == 0 && state === 1)" />
			</scroll-view>
		</view>
		<view class="tool" v-if="state === 2">
			<view class="tool-tips">至少选择一个策略，下个交易日生效</view>
			<u-button class="tool-btn" type="primary" @click="nextStep()">下一步</u-button>
		</view>
	</view>
</template>
<script>
	import BnnLoading from '@/components/bnn-ui/loading/index.vue'
	import DataEmpty from '@/components/data-empty/strategy.vue'
	import { getStrategyList, changeStrategyStatus } from '@/api/member.js'
	import { toStrategyDetailPage } from '@/utils/PageRouter.js'
	export default {
		components: { BnnLoading, DataEmpty },
		data() {
			return {
				reqState: false, // 请求状态管理 true 请求中 false 无请求
				state: 0, // 0.初始化 1.查看列表 2.修改列表
				loading: 'nomore', // loading/nomore
				page: 0, // 当前页码
				limit: 10, // 条数
				total: 0, // 总页数
				list: [] // 列表数据
			}
		},
		onLoad(option) {
			let state = Number(option.state)
			if (state === 1) {
				uni.setNavigationBarTitle({
				　　title: '策略列表'
				})
			}
			this.init(state)
		},
		methods: {
			init: function(state) {
				let data = {
					page: this.page,
					limit: this.limit,
					tag: 1
				}
				this.loading = 'loading'
				getStrategyList(data).then(res=> {
					if (res.code === 200) {
						let { strategy, page } = res.data
						this.total = Number(page.totalCount)
						strategy.map(item=> {
							let { id, name, week_earnings, month_earnings, open_close, has_rule, tag } = item
							this.list.push({
								id,
								name,
								week: week_earnings,
								month: month_earnings,
								status: open_close ? true : false,
								rules: has_rule,
								tag: Number(tag),
								loading: false,
								checked: false
							})
						})
						// 没有更多数据了
						if (this.total > this.page * this.limit) {
							this.loading = 'nomore'
						}
						// 加载完成
						if (state) this.state = state
					}
				}).catch(err=> {
					this.loading = 'nomore'
				})
			},
			// 查看详情
			viewStrategy: function(item) {
				if (!this.reqState) {
					toStrategyDetailPage(item.id)
				}
			},
			// 冒泡
			bubbling: function() {},
			// 开启或关闭策略跟投
			changeStatus: function(val) {
				const that = this
				const value = val.split(',')
				const index = value[0]
				const status = value[2]
				const data = {
					strategy_id: value[1],
					type: Number(status), // 0.关 1.开
				}
				that.list[index].loading = true
				if (data.type) {
					that.changeStrategyItem(data, value)
				} else {
					uni.showModal({
						title: '温馨提示:',
						content: '停止策略跟投，您账户已有的持仓不能跟投策略平仓，确认停止跟投吗？',
						success(res) {
							if (res.confirm) {
								that.reqState = true
								that.changeStrategyItem(data, value)
							}
							if (res.cancel) {
								that.list[index].status = status ? true : false
								that.list[index].loading = false
							}
						}
					})
				}
			},
			// 开启/关闭跟投
			changeStrategyItem: function(data, value) {
				const index = value[0]
				const status = value[2]
				changeStrategyStatus(data).then(res=> {
					this.reqState = false
					this.list[index].loading = false
					let title = ''
					if (res.code === 200) {
						let str = status == 1 ? '已开启' : '已关闭'
						title = '【'+this.list[index].name+'】规则'+str
					} else {
						title = res.message
						this.list[index].status = status ? true : false
					}
					uni.showToast({
						title,
						icon: 'none'
					})
				}).catch(err=> {
					this.reqState = false
					this.list[index].loading = false
					this.list[index].status = status ? true : false
					uni.showToast({
						title: err.message,
						icon: 'none'
					})
				})
			},
			// 查看跟投规则
			viewRule: function(item) {
				if (!this.reqState) {
					uni.navigateTo({
						url: '../strategy-detail/index?id='+item.id
					})
				}
			},
			// 触底加载
			loadMore: function() {
				if (!this.reqState) {
					if (this.page * this.limit < this.total) {
						this.page += 1
						this.init()
					} else {
						this.loading = 'nomore'
					}
				}
			},
			//提交策略
			nextStep: function() {
				let arr = []
				let status = false
				this.list.map(item => {
					if (item.checked) {
						arr.push(item.id)
						if (item.status) {
							status = true
						}
					}
					return item
				})
				if (arr.length > 0) {
					if (status) {
						uni.showModal({
							title: '温馨提示:',
							content: '更改该策略关系和规则后，账户历史持仓需要您自行卖出，确认更换策略规则吗？',
							success(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '../strategy-rule/index?ids='+arr.join(',')
									})
								}
							}
						})
					} else {
						uni.navigateTo({
							url: '../strategy-rule/index?ids='+arr.join(',')
						})
					}
				} else {
					uni.showToast({
						title: '请选择至少一个策略',
						icon: 'none'
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background-color: #ffffff;
		position: relative;
	}
	.list {
		height: calc(100% - 72px);
		.f-bc {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.f-cc {
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.list-header {
			background-color: #F7F7F7;
			height: 40px;
			.operate {
				width: 48px;
				padding-right: 0;
			}
		}
		.flex1 {
			flex: 1;
		}
		.row {
			text-align: center;
			padding: 0 4px;
		}
		.name {
			width: 125px;
			padding-right: 36rpx;
			position: relative;
		}
		.status {
			width: 64px;
		}
		.operate {
			width: 40px;
			line-height: 1;
			padding-right: 8px;
		}
		.item-tag {
			position: absolute;
			left: 100%;
			top: 50%;
			transform: translate(-36rpx, -50%);
			line-height: 24rpx;
			padding: 2px 3px;
			font-size: 24rpx;
			color: #fff;
			border-radius: 2px;
		}
		.backred {
			background-color: rgb(231, 76, 60)
		}
		.backgreen {
			background-color: rgb(68, 184, 94)
		}
		.list-content {
			height: calc(100% - 40px);
			overflow: scroll;
			.list-item {
				border-bottom: 1px solid #E6E6E6;
				height: 60px;
				&:last-child {
					border-bottom: none;
				}
				.list-checkbox {
					margin-left: 8rpx;
				}
				.cred {
					color: #F42E2F;
				}
				.cgreen {
					color: #2daf4a;
				}
				.cblue {
					color: #008CEE;
					font-size: 12px;
				}
			}
			.list-empty {
				padding: 10px 0;
			}
		}
 	}
	.h100 {
		height: 100%;
	}
	.tool {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 72px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-shadow: rgba(0, 0, 0, .3) 0px 0px 3px;
		.tool-tips {
			font-size: 12px;
			color: #D9D9D9;
			margin-bottom: 4px;
		}
		.tool-btn {
			width: 600rpx;
			height: 32px;
			line-height: 32px;
			font-size: 14px;
		}
	}
</style>
